<!--  -->
<script setup>
defineProps({
  topic: {
    type: String,
    default: ''
  }
})
</script>

<template>
  <div class="card">
    <div class="card-topic">{{ topic }}</div>
    <div class="card-item">
      <slot></slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
.card {
  border: 1px solid var(--border-secondary);
  border-bottom: 0;
  border-radius: 2px;
  margin-bottom: 1em;

  .card-topic {
    padding: 1em;
    background-color: #d9e7d9;
    border-bottom: 1px solid var(--border-secondary);
  }

  .card-item {
    padding: 1em;
    border-bottom: 1px solid var(--border-secondary);
  }
}
</style>
